<template>
 <div>
   <div>
     这是：Layout 布局
   </div>
   <div id="app">
     <div class="parent-content">
       <h2>父组件内容：</h2>
       <input v-model="msg"/>
       <button @click="notify">Broadcast Event</button>
     </div>

     <child-component></child-component>
   </div>

   <!-- 组件2 -->
   <div>
     测试2:
     <p @click="add()">{{ msg2 }}</p>
   </div>

 </div>
</template>

<script>
  import childComponent from '@/components/childComponent'
  import Bus from '@/components/Bus'
  export default {
    name: "basic-layout",
    components: {
      'child-component': childComponent
    },
    data() {
      return {
        msg : '',
        msg2 : 'I come From HI',
      }
    },
    methods: {
      notify: function () {
        if (this.msg.trim()) {
          debugger
          //通知儿子组件 信息 : 事件 注册： 在子组件
          //通知子组件 事件 parent-msg 的 发生（在父组件传入数据：this.msg）
          Bus.$emit('getParams', this.msg)
        }
      },
      add() {
        Bus.$emit('txtFun', 'I come From HI (HELLO)');
      },
    }
  }
</script>

<style scoped>

  #app {
    max-width: 640px;
    margin: 50px auto;
  }

  .parent-content, .child-content {
    height: 150px;
    padding: 20px;
  }

  .parent-content {
    border: 1px solid #0090D3;
    margin-bottom: 20px;
  }

  .child-content {
    border: 1px solid #ff0066;
  }
</style>
